<?php
	//start the session
	session_start();
?>
<html lang="en">
<head>
	<title>
		Camera Roll Home
	</title>
	<link href="css/bootstrap.css" rel="stylesheet"> 
	<style>
		body {
			padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
		}#f61616
	</style> 
	<link href="css/bootstrap-responsive.css" rel="stylesheet" /> 
	<link href="css/smoothness/jquery-ui-1.9.1.custom.css" rel="stylesheet" />
	<link href="css/cameraRoll.css" rel="stylesheet" />
	<link href="css/lightbox.css" rel="stylesheet" />
	
	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
	<script type="text/javascript" src="js/bootstrap.js"></script>
	<script type="text/javascript" src="js/jquery-ui-1.9.1.custom.js"></script>
	<script type="text/javascript" src="js/cameraRoll.js"></script>
	<script src="js/lightbox.js"></script>
	<script>

		<?php
			echo "var userName = '".$_SESSION['userName']."';\n";
			echo "var albumName = '".$_GET['album']."';";
		?>

		$(document).ready (function() {

		var albumsResponse;

			$("#signOut a").click(function(event) {
				event.preventDefault();
				$.get("./cameraRollPhp/logout.php", function(data) {
					location.href="./";
				});
			});

			$.cameraRoll.viewPhotos(albumName ? albumName : "default");

			$.getJSON("cameraRollPhp/viewAlbums.php", function(data){
				$.cameraRoll.buildMenu(document.width, data, userName);
				$.cameraRoll.buildDropdown(data, userName);
				$.cameraRoll.buildRemoveAlbumDropdown(data, userName);
				albumsResponse = data;
			});

			window.onresize = function(){
				$.cameraRoll.buildMenu(document.width, albumsResponse, userName);
			};

			$(function() {
				$( "#menuTest" ).menu();
			});

			// View Image Dialog Box
			$.cameraRoll.buildDialog({
				selector: $('#imagePopup')
			});
			
			// ****Manage Profile Dialog Box Functionality****
			// Manage profile dialog build
			$.cameraRoll.buildDialog({
				selector: $('#navManageProfile'),
				title: "Manage Profile"
			});

			//submit when "Return" used on keyboard when in manage profile box
			$('#upload-file').keyup(function(event) {
				event.preventDefault();
				if(event.keyCode == 13){
					$('#accountOptions').css('visibility', 'visible');
					$('#mgr-submit').click();
				}
			});

			// Manage profile submit
			$('#mgr-submit').click(function(){
				$.cameraRoll.manageProfile({
					firstName: $('#firstName'),
					lastName: $('#lastName'),
					update: true,
					close: function(){
						$('#mgr-cancel').click();
					}
				});
			});

			// Manage profile cancel
			$('#mgr-cancel').click(function(){
				$('#accountOptions').css('visibility', 'visible');
				$.cameraRoll.resetDialog({
					dialog: $('#navManageProfile'),
					inputs: [$('#firstname'),$('#lastName')]
				});
			});


			// ****Change Password Dialog Box Functionality****
			// Change password dialog build
			$.cameraRoll.buildDialog({
				selector: $('#navChangePassword'),
				title: "Change Password"
			});

			//submit when "Return" used on keyboard when in change password box
			$('#upload-file').keyup(function(event) {
				event.preventDefault();
				if(event.keyCode == 13){
					$('#accountOptions').css('visibility', 'visible');
					$('#mgr-submit').click();
				}
			});

			// Change password submit
			$('#newPwd-submit').click(function(){
				$.cameraRoll.updatePassword({
					oldPassword: $('#oldPassword'),
					newPassword: $('#newPassword'),
					confirmPassword: $('#confirmNewPassword'),
					close: function(){
						$('#newPwd-cancel').click();
					}
				});
			});

			// Change password cancel
			$('#newPwd-cancel').click(function(){
				$('#accountOptions').css('visibility', 'visible');
				$.cameraRoll.resetDialog({
					dialog: $('#navChangePassword'),
					inputs: [$('#newPassword'), $('#oldPassword'), $('#confirmNewPassword')]
				});
			});


			// ****Change Email Dialog Box Functionality****
			// Change email dialog build
			$.cameraRoll.buildDialog({
				selector: $('#navChangeEmail'),
				title: "Change Email"
			});

			// Change email submit
			$('#newEmail-submit').click(function(){
				$.cameraRoll.updateEmail({
					oldEmail: $('#oldEmail'),
					newEmail: $('#newEmail'),
					confirmEmail: $('#confirmNewEmail'),
					close: function(){
						$('#newEmail-cancel').click();
					}
				});
			});

			// Change email cancel
			$('#newEmail-cancel').click(function(){
				$('#accountOptions').css('visibility', 'visible');
				$.cameraRoll.resetDialog({
					dialog: $('#navChangeEmail'),
					inputs: [$('#newEmail'), $('#oldEmail'), $('#confirmNewEmail')]
				});
			});


			// ****Upload Dialog box functionality****
			// Upload dialog build
			$.cameraRoll.buildDialog({
				selector: $('#uploadPopup'),
				title: "Upload Photo"
			});

//			$.cameraRoll.uploadEnterKeyPress();

			// Upload submit
			$('#upload-submit').click(function(){
				$('#photos').css('visibility', 'visible');
				$.cameraRoll.uploadPhoto({
					form: $('#uploadForm'),
				});
				location.reload();

//				$('#upload-cancel').click();
			});

			// Upload cancel
			$('#upload-cancel').click(function(){
				$('#photos').css('visibility', 'visible');
				$.cameraRoll.resetDialog({
					dialog: $('#uploadPopup'),
					inputs: [$('#upload-file')]
				});
			});


			// ****Add Album Dialog Box Functionality****
			// Add Album dialog
			$.cameraRoll.buildDialog({
				selector: $('#addAlbumPopup'),
				title: "Add Album",
				userName: userName
			});

			//submit when "Return" used on keyboard when in album box
			$('#albumName').keyup(function(event) {
				event.preventDefault();
				if(event.keyCode == 13){
					$('#albums').css('visibility', 'visible');
					$('#addAlbum-submit').click();
				}
			});

			// Add Album submit
			$('#addAlbum-submit').click(function(){
				$('#albums').css('visibility', 'visible');
				$.cameraRoll.createAlbum({
					albumName: $('#albumName'),
					errorField: $('#albumError')
				});
				location.reload();
			});

			// Add Album cancel
			$('#addAlbum-cancel').click(function(){
				$('#albums').css('visibility', 'visible');
				$.cameraRoll.resetDialog({
					dialog: $('#addAlbumPopup'),
					inputs: [$('#albumName')]
				});
			});

			// ****Remove Dialog box functionality****
			// Remove dialog build
			$.cameraRoll.buildDialog({
				selector: $('#removePopup'),
				title: "Remove Album	"
			});

			//submit when "Return" used on keyboard when in remove box
			$('#deleteDropdownBox').keyup(function(event) {
				event.preventDefault();
				if(event.keyCode == 13){
					$('#albums').css('visibility', 'visible');
					$('#remove-submit').click();
				}
			});

			// Remove submit
			$('#remove-submit').click(function(){
				$('#albums').css('visibility', 'visible');
				$.cameraRoll.deleteAlbum({
					album: $('#deleteDropdownBox').val(),
					closeButton: $('#remove-cancel')
				});
				location.reload();
			});

			// Remove cancel
			$('#remove-cancel').click(function(){
				$('#photos').css('visibility', 'visible');
				$.cameraRoll.resetDialog({
					dialog: $('#removePopup'),
					inputs: [$('#remove-file')]
				});
			});

			// Remove image
			$('#remove-image-button').click(function(){
				$.cameraRoll.deletePhoto({
					image: $('#imageWindow img').attr('src')
				});
				location.reload();
			});

			// Close image
			$('#image-close').click(function(){
				$.cameraRoll.resetDialog({
					dialog: $('#imagePopup'),
				});
			});

			// Hide all dialog close x's
			$.cameraRoll.hideDialogClose();

		});
	</script>

</head>

<body>
	<div id="header" class="navbar navbar-fixed-top">
		<div class="navbar-inner">
			<div class="container">		
				<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
				        <span class="icon-bar"></span>
				        <span class="icon-bar"></span>
				        <span class="icon-bar"></span>
				</a>
				
				<!--Brand image-->
				<a id="brand" class="brand" href="./" style="font-family: Copperplate">
					<img class="brandImage" src="./images/longShortCameraRoll.png">	
				</a>
			<div class="nav-collapse">
				<ul id="navlist" class="nav">
				
					<!--Return to user home page-->
					<li id="home" class="active">
						<a href="./" style="font-family: Impact">Home</a>
					</li>

					<!--Account as dropdown list-->
					<li class="dropdown">
						<a id="account" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown" style="font-family: Impact">Account</a>
							<ul  id="accountOptions" class="dropdown-menu" role="menu" aria-labelledby="account">
								<li>
									<a name="navManageProfile" href="#">Manage Profile</a>
								</li>
								<li>
									<a name="navChangePassword" href="#">Change Password</a>
								</li>
								<li>
									<a name="navChangeEmail" href="#">Change Email</a>
								</li>
							</ul>
					</li>

					<!--Sign out-->
					<li id="signOut">
						<a href="./signOut.html" style="font-family: Impact">Sign Out</a>
					</li>
				</ul>
			</div>
			</div>	
		</div>
	</div>

	<!--Sidebar-->
	<div id="sideBar" class="span2" >
		<!-- sideBar navigation goes here -->
	</div>
	
	<!--main page elements-->
	<div id="mainPage" class="span10">
		<h1 style="font-family: Comic Sans">
			Welcome 
			<?php
				//the username is set, display the username
				if(isset($_SESSION['firstName']) && $_SESSION['firstName'] != null) {
					echo $_SESSION['firstName'];
				}
				else if(isset($_SESSION['userName'])){
					echo $_SESSION['userName'];
				}
				//otherwise, redirect to login page
				else {
					header('Location:./');
					exit;
				}
			?>
		</h1>

	<br />
	<h2 id="albumTitle" data-album="default">Default Album</h2>
		<div id="photo-container">
		<!--Picture carousel-->
			<div id="CameraRollCarousel" class="carousel slide span7">
				<!-- Carousel items -->
				<div class="carousel-inner carouselProps">
					<center>

					</center>
				</div>
				<!-- Carousel nav -->
				<a class="carousel-control left" href="#CameraRollCarousel" data-slide="prev">&lsaquo;</a>
				<a class="carousel-control right" href="#CameraRollCarousel" data-slide="next">&rsaquo;</a>
			</div>
		</div>

		<!--Manage Profie popup-->
		<div id="navManageProfile">
			<center>
				<div>
					<form name="manageProfileForm">
						<label for="firstName">First Name:</label><input type = "text" id = "firstName" name="firstName" placeholder="First Name" />
						<label for="lastName">Last Name:</label><input type = "text" id = "lastName" name="lastName" placeholder="Last Name" />
						<br />
						<br />						
						<button class="btn btn-primary" type="button" value="Update" id="mgr-submit">Update</button>
						<button class="btn" type="button" value="Cancel" id="mgr-cancel">Cancel</button>
					</form>
				</div>
			</center>
		</div>

		<!--Change password popup-->
		<div id="navChangePassword">
			<center>
				<div>
					<form name="changePasswordForm">
						<label for="oldPassword">Old Password:</label><input type = "password" id = "oldPassword" name="oldPassword" placeholder="Old Password" />
						<label for="newPassword">New Password:</label><input type = "password" id = "newPassword" name="newPassword" placeholder="New Password" />
						<label for="confirmNewPassword">Confirm New Password:</label><input type = "password" id = "confirmNewPassword" name="confirmNewPassword" placeholder="Confirm New Password" />
						<br />
						<br />						
						<button class="btn btn-primary" type="button" value="Update" id="newPwd-submit">Update</button>
						<button class="btn" type="button" value="Cancel" id="newPwd-cancel">Cancel</button>
					</form>
				</div>
			</center>
		</div>

		<!--Change email popup-->
		<div id="navChangeEmail">
			<center>
				<div>
					<form name="changeEmailForm">
						<label for="oldEmail">Old Email:</label><input type = "text" id = "oldEmail" name="oldEmail" placeholder="Old Email" />
						<label for="newEmail">New Email:</label><input type = "text" id = "newEmail" name="newEmail" placeholder="New Email" />
						<label for="confirmNewEmail">Confirm New Email:</label><input type = "text" id = "confirmNewEmail" name="confirmNewEmail" placeholder="Confirm New Email" />
						<br />
						<br />						
						<button class="btn btn-primary" type="button" value="Update" id="newEmail-submit">Update</button>
						<button class="btn" type="button" value="Cancel" id="newEmail-cancel">Cancel</button>
					</form>
				</div>
			</center>
		</div>
		
		<!--Upload popup-->
		<div id="uploadPopup">
			<center>
				<div>
					<form name="uploadForm" id="uploadForm" target="transFrame" method="post" action="cameraRollPhp/uploadPhoto.php" enctype="multipart/form-data">
						<label for="dropdownBox">Select Album</label>
						<select id="dropdownBox" name="dropdownBox">
							<!--dropdownBox info goes here-->
						</select>
						<br />
						<br />
						<input id="upload-file" name="uploaded-file" type="file" />
						<br />
						<br />						
						<button class="btn btn-primary" type="button" value="Upload" id="upload-submit">Upload</button>
						<button class="btn" type="button" value="Cancel" id="upload-cancel">Cancel</button>
					</form>
				</div>
			</center>
		</div>

		<!--Add album popup-->
			<div id="addAlbumPopup">
				<center>
					<div id="albumError"></div>
					<div id="addAlbum">
						<label for="albumName">Album Name</label>
						<input type="text" name="albumName" id="albumName" />
						<button class="btn btn-primary" type="button" value="Create" id="addAlbum-submit">Create</button>
						<button class="btn" type="button" value="Cancel" id="addAlbum-cancel">Cancel</button>
					</div>
				</center>
			</div>

		<!--Remove popup-->
		<div id="removePopup">
			<center>
				<div>
					<form name="removeForm" id="removeForm" target="transFrame" method="post" action="cameraRollPhp/removePhoto.php" enctype="multipart/form-data">
						<label for="deleteDropdownBox">Remove Album</label>
						<select id="deleteDropdownBox" name="deleteDropdownBox">
							<!--dropdownBox info goes here-->
						</select>
						<br />
						<br />
						<button class="btn btn-primary" type="button" value="Remove" id="remove-submit">Remove</button>
						<button class="btn" type="button" value="Cancel" id="remove-cancel">Cancel</button>
					</form>
				</div>
			</center>
		</div>

		<!--View Image Pop Up-->
		<div id="imagePopup">
			<div id="imageWindow">
				
			</div>
			<div id="imageControls">
				<center>
					<button class="btn btn-warning" type="button" value="Delete" id="remove-image-button">Delete Image</button>
					<button class="btn" type="button" value="Close" id="image-close">Close</button>
				</center>
			</div>
		</div>

		<!--Upload photo iframe-->
		<iframe name="transFrame" id="transFrame" class="hidden"></iframe>

</body>

</html>
